<template>
  <sys-page ref="page" :columns="columns" :model="model" :loader="loader" :label-width="null"
            selectedAble
            :query-props="{expandAble: false}"
  >
    <template v-slot:form>
      <el-form-item label="数据集名称">
        <el-input v-model="model.setName" placeholder="数据集名称" clearable></el-input>
      </el-form-item>
      <el-form-item label="数据集类型">
        <el-select v-model="model.setType" placeholder="请选择" clearable>
          <el-option label="sql" value="sql"></el-option>
          <el-option label="http" value="http"></el-option>
        </el-select>
      </el-form-item>
    </template>

    <template v-slot:form-adv>
      <el-form-item label="数据源">
        <el-select v-model="model.sourceId">
          <el-option v-for="item in sourceList" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
    </template>

    <template v-slot:tools>
      <el-dropdown placement="bottom" @command="onAdd">
        <el-button type="primary" icon="el-icon-plus" size="mini">
          新增
          <i class="el-icon-arrow-down el-icon--right"></i>
        </el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="sql">SQL</el-dropdown-item>
          <el-dropdown-item command="http">HTTP</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <el-button style="margin-left: 5px;" type="danger" icon="el-icon-delete" size="mini" @click="onBatchDelete">批量删除</el-button>
    </template>

    <template v-slot:ctrl="scope">
      <sys-ctrl :btns="btns" :scope="scope"></sys-ctrl>
    </template>

  </sys-page>
</template>

<script>
import {postReportdatasetList, postReportdatasetDelete} from '@/api/dateSet'
import {postReportReportdatasourceListAll} from "@/api/dataSource"
import edit from './edit'
import viewData from './view-data'

function getColumns() {
  return [
    {type: 'selection', align: 'center'},
    {type: 'index', label: '序号', align: 'center'},
    {prop: 'setName', label: '数据集名称', align: 'center', minWidth: 120, showOverflowTooltip: true, display: true},
    {prop: 'setDesc', label: '描述', align: 'center', minWidth: 120, showOverflowTooltip: true, display: true},
    {prop: 'setType', label: '数据集类型', align: 'center', minWidth: 120, showOverflowTooltip: true, display: true},
    {prop: 'createTime', label: '创建时间', align: 'center', minWidth: 120, showOverflowTooltip: true, display: true},
    {prop: 'ctrl', label: '操作', width: '180px', fixed: 'right', align: 'center'}
  ]
}

export default {
  name: 'dataSource',
  cnName: 'dataSource',
  data() {
    return {
      model: {
        setName: '',
        setType: ''
      },
      columns: getColumns(),
      sourceList: [],
      btns: [
        {
          label: '编辑',
          click: row => {
            this.onEdit(row)
          }
        },
        {
          label: '数据预览',
          click: scope => {
            this.onView(scope.row)
          }
        },
        {
          label: '删除',
          click: scope => {
            this.onDelete(scope.row)
          }
        }
      ]
    }
  },
  methods: {
    async loader(model) {
      model.sidx = 'create_time'
      model.order = 'DESC'
      return postReportdatasetList(model)
    },
    onAdd(command) {
      this.$refs.page.setDialog({
        title: '新增-' + command,
        comp: edit,
        props: {
          setType: command
        }
      })
    },
    onEdit(row) {
      const {id} = row
      this.$refs.page.setDialog({
        title: '修改数据源',
        height: '50%',
        comp: edit,
        props: {
          id: id
        }
      })
    },
    onView(row) {
      this.$refs.page.setDialog({
        title: '预览数据',
        comp: viewData,
        props: {
          data: row.caseResult
        }
      })
    },
    onDelete(row) {
      this.doDelete([row.id])
    },
    onBatchDelete() {
      const shopList = this.$refs.page.shopList
      if (shopList.length === 0) {
        this.$message.warning('请先勾选数据！')
        return
      }
      const ids = shopList.map(o => o.id)
      this.doDelete(ids)
    },
    doDelete(ids) {
      this.$confirm('确定进行删除操作?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        postReportdatasetDelete(ids).then(_ => {
          this.$notify.success('删除成功!')
          this.$refs.page.reload()
        })
      })
    },
    async loadDict() {
      // 获取数据源
      const res = await postReportReportdatasourceListAll({enableFlag: 1})
      const list = res || []
      this.sourceList = list.map(o => {
        return {
          label: o.sourceName,
          value: o.id
        }
      })
    }
  },
  mounted() {
    this.loadDict()
  }
}
</script>

<style lang="less" scoped>
.dataSource {
}
</style>
